<template>
  <div class="sentence-question">
    <div v-if="question.questionType == 0" class="study-sentence">
      <div class="study-sentence-question">
        <div class="study-sentence-word">
          <div class="check-word">
            <span
              class="check-word-item"
              v-for="(item, index) in answerList"
              :key="index"
            >
              <!-- 标点符号 -->
              <span v-if="item.isPunctuation"> {{ item.trueWord }}&nbsp; </span>
              <span
                class="click ml5"
                v-else-if="item.checkedOption"
                @click="cancellOption(item)"
              >
                {{ item.checkedOption.word }}
              </span>
              <span class="ml5" v-else>___</span>
            </span>
          </div>
          <div class="delete click" @click="deleteNearOption">
            <i class="el-icon-brush"></i>
          </div>
        </div>
        <AudioPlay
          class="fr click"
          ref="audioPlay"
          :type="1"
          :audioSrc="baseURL + question.audioURL"
        ></AudioPlay>
      </div>
      <div class="study-line"></div>
      <div class="study-bottom">
        <div class="study-bottom-two study-bottom-options">
          <div class="study-bottom-left">
            <div class="options">
              <div
                class="options-item click"
                v-for="(item, index) in optionList"
                :key="index"
                @click="checkWordOption(item)"
                :class="item.isChecked ? 'item-hidden' : ''"
              >
                <div>
                  {{ item.word }}
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="study-bottom-right">
            <div class="study-bottom-not click" @click="clickNot">
              <img src="@/assets/img/star-no.png" alt="" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div v-if="question.questionType == 1" class="select-sentence">
      <div class="select-sentence-top">
        <div class="select-sentence-top-left">
          <AudioPlay
            class="fr click"
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
          <span class="reminder-text">请听读音</span>
        </div>
      </div>
      <div class="study-line"></div>
      <div class="select-sentence-bottom">
        <el-radio-group v-model="stuAnswer" @change="changeAnswer" size="small">
          <el-radio
            class="question-radio"
            v-for="(item, index) in question.answerList"
            :key="index"
            :label="item.paraphrase"
            >{{ item.paraphrase }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div v-if="question.questionType == 2" class="study-sentence">
      <div class="study-sentence-question">
        <div class="study-sentence-word">
          <div>
            <span v-for="(item, index) in answerList" :key="index">
              <!-- 标点符号 -->
              <span v-if="item.isPunctuation"> {{ item.trueWord }}&nbsp; </span>
              <span
                class="click ml5"
                v-else-if="item.checkedOption"
                @click="cancellOption(item)"
              >
                {{ item.checkedOption.word }}
              </span>
              <span class="ml5" v-else>___</span>
            </span>
          </div>
          <div class="delete click" @click="deleteNearOption">
            <i class="el-icon-brush"></i>
          </div>
        </div>
      </div>
      <div class="study-line"></div>
      <div class="study-bottom">
        <div class="study-bottom-two study-bottom-options">
          <div class="study-bottom-left">
            <div class="paraphrase">
              {{ question.paraphrase }}
            </div>
            <div class="options">
              <div
                class="options-item click"
                v-for="(item, index) in optionList"
                :key="index"
                @click="checkWordOption(item)"
                :class="item.isChecked ? 'item-hidden' : ''"
              >
                <div>
                  {{ item.word }}
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="study-bottom-right">
            <div class="study-bottom-not click" @click="clickNot">
              <img src="@/assets/img/star-no.png" alt="" />
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div v-if="question.questionType == 3" class="sentence-write">
      <div class="sentence-write-top">
        <div class="sentence-write-bottom-paraphrase">
          {{ question.paraphrase }}
        </div>
      </div>
      <div class="study-line"></div>
      <div class="sentence-write-bottom">
        <div class="sentence-write-bottom-input">
          <div class="input-container">
            <el-input
              @paste.native.capture.prevent="$handlePaste"
              v-model="stuAnswer"
              ref="sentenceInput"
              @input="changeAnswer"
            ></el-input>
          </div>
        </div>
        <!-- <div class="study-bottom-right">
          <div class="study-bottom-not click" @click="clickNot">
            <img src="@/assets/img/star-no.png" alt="" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
// import { debounce } from "@/utils/utils";
import { setSentenceToWord } from "@/assets/js/sentence2word";
export default {
  data() {
    return {
      answerList: [], //选词填空答案
      stuAnswer: "", //选择题和默写答案
      wordList: [],
      optionList: [],
    };
  },
  methods: {
    deleteNearOption() {
      if (this.isCheckedSentence) return;
      let answerData = null;
      this.answerList.forEach((item) => {
        if (!item.isPunctuation && item.checkedOption) {
          answerData = item;
        }
      });
      if (!answerData) {
        return;
      }
      console.log(answerData);
      this.optionList.forEach((item) => {
        if (item.index == answerData.checkedOption.index) {
          item.isChecked = false;
        }
      });
      answerData.checkedOption = null;
    },
    inputFocus() {
      if (this.$refs.sentenceInput) {
        this.$refs.sentenceInput.focus();
      }
    },
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    setAnswerList() {
      this.$emit("changeAnswerList", this.answerList);
    },
    changeAnswer() {
      this.$emit("changeAnswer", this.stuAnswer);
    },
    // 选择单词选项
    checkWordOption(option) {
      if (option.isChecked) return;
      for (let i = 0; i < this.answerList.length; i++) {
        let item = this.answerList[i];
        if (!item.isPunctuation && !item.checkedOption) {
          item.checkedOption = option;
          this.setAnswerList();
          //
          break;
        }
      }
      option.isChecked = true;
      let isCheck = this.answerList.every((item) => {
        return item.checkedOption || item.isPunctuation;
      });
      if (isCheck) {
        this.$emit("nextQuestion");
      }
    },
    // 移除选中单词
    cancellOption(answerData) {
      this.optionList.forEach((item) => {
        if (item.index == answerData.checkedOption.index) {
          item.isChecked = false;
        }
      });
      answerData.checkedOption = null;
      this.setAnswerList();
    },
    // 我不会
    clickNot() {
      this.$emit("nextQuestion");
    },
    initCom() {
      let result = setSentenceToWord(this.question.sentence);
      this.wordList = result.wordList;
      this.optionList = result.optionList;
      this.answerList = result.answerList;
    },
  },
  mounted() {
    this.initCom();
  },
  components: { AudioPlay },
  props: {
    question: {
      type: Object,
      default: function () {
        return {
          id: 189,
          sentence: "Show me your pen.",
          audioUrl:
            "imgs/audio/2021-01-18/ea64f8f2-3de5-4494-ae5c-a0bf78f268b3.mp3",
          paraphrase: "给我看看你的钢笔。",
          questionType: 4,
          answerList: [
            { paraphrase: "选项1", is_true: 0 },
            { paraphrase: "选项2", is_true: 0 },
            { paraphrase: "选项3（正确答案）", is_true: 1 },
            { paraphrase: "选项4", is_true: 0 },
          ],
          stuAnswer: "",
        };
      },
    },
  },
};
</script>
